<template>
  <view class="wrap">
    <view class="simplify-bg">
      <view class="bg-after"></view>
    </view>
    <view class="simplify-bg bottom">
      <view class="bg-after"></view>
    </view>
    <view class="top"></view>
    <view class="content">
      <!-- <view class="logo">
        <img src="/static/images/public/logo.png"/>
      </view> -->
      <view class="title">欢迎登录</view>
      <input class="input-account" focus type="txt" v-model="username" placeholder="请输入账号"
        placeholder-style="color:#bbbbbb" always-embed />
      <!-- <view class="tips">未注册的手机号验证后自动创建账号</view> -->
      <view class="tips">输入已注册账号进行登录</view>
      <view class="pwd-input">
        <input v-if="pwdshow" class="input-account" type="txt" v-model="password" placeholder="请输入密码"
          placeholder-style="color:#bbbbbb" always-embed />
        <input v-else class="input-account" type="password" v-model="password" placeholder="请输入密码"
          placeholder-style="color:#bbbbbb" always-embed />
        <u-icon :name="!pwdshow ? 'eye-fill' : 'eye-off'" @click="pwdshow = !pwdshow"></u-icon>
      </view>
      <view class="tips"></view>
      <button @tap="submit" :style="[inputStyle]" class="getCaptcha">登录</button>
      <view class="alternative">
        <view class="password" @click="loginForMsg">短信登录</view>
        <view class="issue" @click="issue">遇到问题</view>
      </view>
    </view>
    <view class="buttom">
      <view class="loginType"> </view>
      <view class="hint">
        登录代表同意
        <text class="link">用户协议、隐私政策，</text>
        并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
import { useStore } from "vuex";
const store = useStore();

const username = ref("");
const password = ref("");
const pwdshow = ref(false);

const inputStyle = computed(() => {
  const style = {};

  if (username.value && password.value) {
    style.color = "#fff";
    style.backgroundColor = "var(--kui-color-theme)";
  }
  return style;
});

onMounted(() => {
  const { account } = store.getters.loginInfo;
  // 自动填充账号
  if (account) {
    username.value = account;
  }
});


const submit = async () => {
  try {
    uni.showLoading({ title: "登录中..." });
    const payload = { username: username.value, password: password.value };
    await store.dispatch("user/login", payload);
    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
    console.error(error);
  }
};

// 密码登录
const loginForMsg = () => {
  uni.navigateBack();
  // uni.reLaunch({
  //   url: "./login",
  // });
};
// 遇到问题
const issue = () => {
  uni.navigateTo({ url: "/pages/subFeeback/feedbackIndex/feedbackIndex" });
};
</script>
<style lang="scss" scoped>
.wrap {
  font-size: 28rpx;
  background: white;
  padding: 20rpx 0;

  .content {
    z-index: 1;
    position: relative;
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }

    .pwd-input {
      display: flex;
      flex-direction: row;
    }

    .input-account {
      flex: auto;
      font-weight: bold;
      color: var(--kui-color-theme);
      position: relative;
      // &::before {
      //   position: absolute;
      //   bottom: 0;
      //   display: inline-flex;
      //   content: "";
      //   width: 50rpx;
      //   height: 5rpx;
      //   border-radius: 99rpx;
      //   background-color: var(--kui-color-theme);
      // }
    }

    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
      font-size: 38rpx;
    }

    .tips {
      color: #c6c6c6;
      margin-bottom: 60rpx;
      margin-top: 8rpx;
    }

    .getCaptcha {
      // background-color: rgb(253, 243, 208);
      background-color: $kui-color-theme-light;
      color: white;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;

      &::after {
        border: none;
      }
    }

    .alternative {
      color: $uni-text-color-grey;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .buttom {
    position: relative;
    z-index: 1;

    .loginType {
      display: flex;
      padding: 350rpx 150rpx 150rpx 150rpx;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $uni-text-color;
        font-size: 28rpx;
      }
    }

    .hint {
      padding: 20rpx 40rpx;
      font-size: 25rpx;
      color: $uni-text-color-grey;

      .link {
        color: var(--kui-color-theme);
      }
    }
  }
}


.simplify-bg {
  background-image: radial-gradient($kui-color-theme, transparent 63%);
  width: 230px;
  height: 288px;
  transform: rotateZ(243deg);
  position: absolute;
  left: 0px;
  top: -120px;
  opacity: 0.8;
  filter: blur(80rpx);
  z-index: 0;
  // -webkit-backdrop-filter: blur(80rpx);
  // backdrop-filter: blur(80rpx);

  &.bottom {
    left: auto;
    top: auto;
    right: -120px;
    bottom: 50px;
    background-image: radial-gradient($kui-color-theme, transparent 33%);
  }


  .bg-after {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#0c0c0c00 2px, #ffffff 2px);
    background-size: 4px 4px;
    backdrop-filter: blur(20px);
  }
}

.logo {
  filter: brightness(1.5);

  img {
    width: 260rpx;
    height: 100rpx;
  }
}
</style>
